
<!-- ----------------------------------------------------------------------- -->

<nav class="navbar navbar-dark bg-dark" style="position:relative;">

    <div class="container-fluid" style="z-index: 1000">

        <!--the 菜单按钮 that 只在xs sm 屏幕上显示-->
        <button id="btnNavbarToggler" class="navbar-toggler d-block d-sm-block d-md-none" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!--the 网站标题 that 显示在顶部导航栏左侧-->
        <a class="navbar-brand" href="<?php echo $homepage; ?>" target="_self">Todo</a>

        <!--the 退出登录按钮 that 只在xs sm 屏幕上隐藏-->
        <p class="mt-1 mb-1 mx-2 text-white d-none d-sm-none d-md-block">
            <a href="#" class="btnLogout text-white text-decoration-none" target="_self">退出登录</a>
        </p>

    </div>

    <!--透明蒙板，使得用户点击空白区域时可以隐藏下拉菜单-->
    <div class="mask" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 999; cursor: pointer;"></div>

    <!--小屏幕上点击菜单按钮后才会显示的内容-->
    <div class="bg-light" id="navbarToggleExternalContent" style="display: none; position: absolute; top: 56px; left: 0; width: 100%; z-index: 1000;">
        <div class="p-3">
            <p class="text-primary mt-1 mb-1">
                <a href="#" class="btnLogout text-decoration-none" target="_self">退出登录</a>
            </p>
        </div>
    </div>

</nav>

<!-- ----------------------------------------------------------------------- -->

<script>

    // 添加 cookie
    function setCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    // 查询 cookie
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    // 删除 cookie
    function eraseCookie(name) {
        document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }

</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    $(".btnLogout").on("click", function () {
        eraseCookie('<?php echo $cookieUsername; ?>');
        eraseCookie('<?php echo $cookiePassword; ?>');
        location.reload();
    });
</script>

<!-- ----------------------------------------------------------------------- -->

<!--快捷键 to 退出登录-->
<script>

    $(window).bind('keydown', function(event) {
        if (event.ctrlKey || event.metaKey) {
            switch ((event.key).toLowerCase()) {
                case 'o':
                    event.preventDefault();
                    $(".btnLogout")[0].click();
            }
        }
    });

</script>

<!-- ----------------------------------------------------------------------- -->

<script>

    // 点击菜单按钮时执行
    $("#btnNavbarToggler").on("click", function () {
        // 判断下拉菜单的显示状态
        if ($("#navbarToggleExternalContent").is(":hidden")) { // 下拉菜单当前已经折叠
            $("#navbarToggleExternalContent").slideDown() // 展开下拉菜单
            $(".mask").show() // 显示透明蒙板
        } else { // 下拉菜单当前已经展开
            $("#navbarToggleExternalContent").slideUp() // 折叠下拉菜单
            $(".mask").hide() // 隐藏透明蒙板
        }
    })

    // 点击透明蒙板时执行
    $(".mask").on("click", function () {
        $("#btnNavbarToggler").click() // 折叠下拉菜单
    })
</script>

<!-- ----------------------------------------------------------------------- -->
